<div id="bonus-list">
    <div class="full">
        <h3 class="h3-title" style="margin: 10px;">{{$t('bgMgr.bonusList')}}</h3>
        <ul style="padding-left: 10px;">
            <li>
                <i-input v-model.trim="queryParameter"></i-input>
            </li>
            <li>
                <i-button type="primary" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
        </ul>
        <div class="my-total" style="padding-left: 10px;">
            <span>{{$t("bgMgr.userTotal")}} : {{tableData.length}}</span>
            <span>{{$t("bgMgr.totalGoldenBeans")}} : {{bonuspoints}}</span>
        </div>
        <div style="padding: 0 10px;">
            <i-table border :columns="columns" :data="tableData" :height="taleHeight" :loading="loading"></i-table>
        </div>
        <Modal v-model="modal" width="300">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t('monitor.edit')}}</span>
            </p>
            <Row style="margin: 10px 0">
                <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                    {{$t("bgMgr.memberUser")}} :
                </i-col>
                <i-col span="16" style="height: 100%;line-height:32px;">
                    {{userName}}
                </i-col>
            </Row>
            <div v-if="type=='level'">
                <Row style="margin: 10px 0">
                    <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                        {{$t("bgMgr.memberLevel")}} :
                    </i-col>
                    <i-col span="16">
                        <i-select v-model="level">
                            <i-option value="1">{{$t("bgMgr.level1")}}</i-option>
                            <i-option value="2">{{$t("bgMgr.level2")}}</i-option>
                            <i-option value="3">{{$t("bgMgr.level3")}}</i-option>
                        </i-select>
                    </i-col>
                </Row>
            </div>
            <div v-if="type=='point'">
                <Row style="margin: 10px 0">
                    <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                        {{$t("bgMgr.transferGoldenBeans")}} :
                    </i-col>
                    <i-col span="16">
                        <input-number :max="10000" :min="0" v-model.trim.number="bonuspoint" style="width: 100%;"></input-number>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="6" style="height: 100%;text-align:right;line-height:32px;">
                        {{$t("customer.remark")}} :
                    </i-col>
                    <i-col span="16">
                        <i-input v-model.trim="remark" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <i-button type="primary" style="width: 100%" @click="handleEdit">{{$t('header.submit')}}</i-button>
            </div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#bonus-list",
            i18n: utils.getI18n(),
            data: {
                loading: true,
                modal: false,
                taleHeight: 300,
                queryParameter: '',
                remark: '',
                columns: [{
                    title: vRoot.$t('user.username'),
                    key: 'username',
                }, {
                    title: vRoot.$t('bgMgr.memberLevel'),
                    render: function(h, params) {
                        var str = '';
                        var level = params.row.bonuslevel;
                        switch (level) {
                            case 1:
                                str = vRoot.$t('bgMgr.level1');
                                break;
                            case 2:
                                str = vRoot.$t('bgMgr.level2');
                                break;
                            case 3:
                                str = vRoot.$t('bgMgr.level3');
                                break;
                        };
                        return h('sapn', {}, str);
                    }
                }, {
                    title: vRoot.$t('bgMgr.goldenBeanNumber'),
                    key: 'bonuspoints',
                }, {
                    title: vRoot.$t('alarm.action'),
                    width: 240,
                    render: function(h, params) {
                        var row = params.row;
                        return h(
                            'div', {}, [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: function() {
                                            editObject = row;
                                            vueInstanse.type = 'level';
                                            vueInstanse.userName = row.username;
                                            vueInstanse.level = String(editObject.bonuslevel);
                                            vueInstanse.modal = true;
                                        }
                                    }
                                }, vRoot.$t('bgMgr.adjustMembershipLevel')),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: function() {
                                            editObject = row;
                                            vueInstanse.type = 'point';
                                            vueInstanse.userName = row.username;
                                            vueInstanse.bonuspoint = String(editObject.bonuspoints);
                                            vueInstanse.modal = true;
                                        }
                                    }
                                }, vRoot.$t('bgMgr.transferGoldenBeans')),
                            ]
                        )
                    },
                }],
                userName: '',
                level: '1',
                bonuspoint: 0,
                bonuspoints: 0,
                type: 'level',
                tableData: [],
            },
            methods: {
                handlerClickQuery: function() {
                    if (this.queryParameter) {
                        var me = this;
                        var tableData = [];
                        this.records.forEach(function(item) {
                            if (item.username.indexOf(me.queryParameter) != -1) {
                                tableData.push(item);
                            }
                        });
                        me.tableData = tableData;
                    }

                },
                handleEdit: function() {
                    var me = this;
                    if (this.type == 'level') {
                        var url = myUrls.setBonusLevel();
                        var data = {
                            username: editObject.username,
                            bonuslevel: this.level,
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status === 0) {
                                editObject.bonuslevel = Number(me.level);
                                me.modal = false;
                                me.$Message.success(me.$t('monitor.setupSucc'));
                            } else {
                                me.$Message.error(me.$t('monitor.setupFail'));
                            }
                        });
                    } else {
                        if (!(this.bonuspoint > 0)) {
                            me.$Message.error(me.$t('bgMgr.transferGoldenBeansTips3'));
                            return;
                        }
                        var url = myUrls.assignPoints();
                        var data = {
                            targetusername: editObject.username,
                            points: this.bonuspoint,
                            remark: this.remark,
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status === 0) {
                                me.modal = false;
                                editObject.bonuspoints = resp.topoints;
                                me.bonuspoints = resp.frompoints;
                                me.$Message.success(me.$t('monitor.setupSucc'));
                            } else if (resp.status === 1) {
                                me.$Message.error(vRoot.$t('bgMgr.transferGoldenBeansTips1'));
                            } else if (resp.status === -1) {
                                me.$Message.error(vRoot.$t('bgMgr.transferGoldenBeansTips2'));
                            } else {
                                me.$Message.error(me.$t('monitor.setupFail'));
                            }
                        });
                    }

                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 200;
                },
                queryBonusList: function() {
                    var me = this;
                    var url = myUrls.queryBonusList();
                    utils.sendAjax(url, {}, function(resp) {
                        me.loading = false;
                        if (resp.records) {
                            me.tableData = resp.records;
                            me.records = resp.records;
                        }
                        me.bonuspoints = resp.selfrecord ? resp.selfrecord.bonuspoints : '';
                    }, function() {
                        me.loading = false;
                    })
                }
            },
            watch: {
                queryParameter: function(newVal) {
                    if (newVal == "") {
                        this.tableData = this.records;
                    }
                }
            },
            mounted: function() {
                var me = this;
                me.records = [];
                this.calcTableHeight();
                this.queryBonusList();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>